<template>
  <div class="lineEcharts">
    <div :id="elId"></div>
  </div>
</template>
<script>
  let echarts = require('echarts/lib/echarts')
  // 引入折线图组件
  require('echarts/lib/chart/line')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  //引入uuid文件
  import uuidv1 from 'uuid/v1'
  export default {
    props: {
      xAxis: {       //x轴的显示数据，参数名可以自己定义；
        type: Array,
        default() {
           return []
        }
      },
      opData: Array, //用来配置series的系列列表，参数可以自己定义；
      title: Array, //图表系列标记，参数可以自己定义
    },
    watch: {
      xAxis: {
        handler(curVal, oldVal) {
          //console.log(curVal)
          this.initChart();
        }
      }
    },
    data() {
      return {
        elId: '',
      }
    },
    created() {
      this.elId = uuidv1() //获取随机id
    },
    mounted() {
      this.initChart();
      //console.log(this.time)
    },
   
    methods: {
      initChart() {
        let chartView = echarts.init(document.getElementById(this.elId))
        chartView.setOption({
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            }
          },
          color: ["red", "#34affd", '#ff5555', '#ffde00', '#5af4ce', '#d050ff', '#CD5C5C', '#4DCD53', '#F1AB27', '#B96CD3'], //折线颜色
          legend: {
            data: this.title
          },
            // toolbox: { //可视化的工具箱
            //    show: true,
            //    feature: {
            //      dataView: { //数据视图
            //         show:true,
            //        readOnly: true,
            //        optionToContent: function (opt) {
            //          console.log(opt)
            //          var axisData = opt.xAxis[0].data;
            //          var series = opt.series;
            //          var tdHeaders = '<td>时间</td>'; //表头
            //          series.forEach(function (item) {
            //            tdHeaders += '<td>' + item.name + '</td>'; //组装表头
            //          });
            //          var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
            //          var tdBodys = ''; //数据
            //          for (let i = 0, l = axisData.length; i < l; i++) {
            //            for (let j = 0; j < series.length; j++) {
            //              tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
            //            }
            //            table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
            //            tdBodys = '';
            //          }

            //          table += '</tbody></table></div>';
            //          return table;
            //        }
            //        },
            //        saveAsImage: {//保存图片
            //            show: true
            //        },
            //    }
            //},
          grid: {
            left: '3%',
            right: '4%',
            top: '10%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: this.xAxis
            }

          ],
          yAxis: [
            {
              type: 'value',
              name: '值',
            }
          ],

          series: this.opData
          //series: [{
          //  name: '进件',
          //  type: 'line',
          //  symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          //  data: ['37.2', '37.9', '38.6', '38.9', '39', '40.5']
          //},
          //{
          //  name: '办结',
          //  type: 'line',
          //  symbol: 'emptycircle',    //设置折线图中表示每个坐标点的符号 emptycircle：空心圆；emptyrect：空心矩形；circle：实心圆；emptydiamond：菱形
          //  data: ['37.2', '37.9', '39', '37', '36', '40.5']
          //}]
        })
        window.addEventListener('resize', function () {
          chartView.resize()
        })
      }
    },

    beforeDestroy() {
      if (this.chartView) this.chartView.clear();
    },

  }
</script>

<style scoped>
  .lineEcharts > div {
    width: 100%;
    min-height: 200px;
    height: 100%;
    box-sizing: border-box;
    min-width: 720px;
  }
</style>
